<template>
  <el-container class="main_con proAdd">
    <div class="list_con nomt nopt" style="padding-bottom:0;">
      <el-form label-width="100px">
        <el-form-item label="配送方式">
          <el-checkbox-group v-model="form.type">
            <el-checkbox label="1">商家配送</el-checkbox>
            <el-checkbox label="2">第三方</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="店铺地址"><el-input v-model="form.address"></el-input></el-form-item>
        <el-form-item label="配送区域">
          <el-radio-group>
            <el-radio>按不同区域</el-radio>
            <el-radio>按不同距离</el-radio>
            <el-radio>按行政区域</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="划分方式">
          <el-radio-group>
            <el-radio></el-radio>
          </el-radio-group>
          <div class="flex_div">
            <div class="flex_left">
              <div class="list">
                <div class="item" v-for="(item, index) in form.divide_config">
                  <div class="item_top"><span>区域{{index+1}}</span></div>
                  <el-form-item label="起送金额"><el-input v-model="item.starting_amount"></el-input></el-form-item>
                  <el-form-item label="配送费"><el-input v-model="item.distribution_fee"></el-input></el-form-item>
                  <el-form-item label="半径"><el-input v-model="item.radius"></el-input></el-form-item>
                  <el-form-item label="免配送费">
                    <el-radio-group v-model="item.is_distribution">
                      <el-radio :label="1">是</el-radio>
                      <el-radio :label="0">否</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </div>
              </div>
              <div></div>
            </div>
            <div class="map_area">
              <amap :zoom="13" :center="position" @click="mapClick">
                <amap-circle
                  v-for="(item, index) in form.divide_config"
                  @adjust="adjust"
                  :center="[item.dot.longitude, item.dot.latitude]"
                  :radius.sync="item.radius"
                  :editable="item.editable"
                  :fill-color="fill"
                  :fill-opacity="0.5"
                  :strokeColor="stroke"
                  :draggable="draggable"
                  :cursor="draggable ? 'pointer' : 'default'"
                  @click="ChangeEidt(index)"
                />
                <amap-marker :position="[item.longitude, item.latitude]" v-for="(item, index) in storelist"></amap-marker>
                <amap-tool-bar />
                <amap-scale />
              </amap>
            </div>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </el-container>
</template>

<script>
import {loadAmap, loadPlugins} from '@amap/amap-vue';
import AMap from '@/components/AMap/index';
import {getStoreList} from '@/api/shop/store';
export default {
  data() {
    return {
      center: [120.670565, 28.001373],
      radius: 1000,
      fill: '#ff0000',
      stroke: '#000A58',
      editable: true,
      draggable: true,
      position: [120.670565, 28.001373],
      radius: 1000,
      form: {
        type: [],
        address: 'dhshdahdsadkads',
        divide_config: [
          // {
          //   starting_amount: '',
          //   distribution_fee: '',
          //   radius: '',
          //   is_distribution: '',
          //   commodity: {
          //     money: ''
          //   },
          //   dot: {
          //     longitude: '',
          //     latitude: ''
          //   },
          //   data: []
          // }
        ]
        // divide_config	是	array	商家配送-配置
        // divide_config.starting_amount	是	float	起送金额
        // divide_config.distribution_fee	是	float	配送费
        // divide_config.radius	是	float	半径,以公里为单位
        // divide_config.is_distribution	是	int	是否免配送费 1-是 0-否
        // divide_config.commodity.money	是	float	满多少元，免配送费
        // divide_config.dot.longitude	是	string	圆点经度
        // divide_config.dot.latitude	是	string	圆点纬度
        // divide_config.data
      },
      storelist: [],
      circlelist: [
        {
          color: '',
          editable: false
        }
      ]
    };
  },
  created() {
    this.$ready = new Promise(async resolve => {
      const AMap = await loadAmap();
      await loadPlugins(['AMap.PlaceSearch', 'AMap.AutoComplete']);
      this.ac = new AMap.AutoComplete();
      resolve();
    });
    this.getStoreList();
  },

  methods: {
    ChangeEidt(i) {
      this.form.divide_config.forEach(a => {
        a.editable = false;
      });
      this.form.divide_config[i].editable = true;
    },
    mapClick() {},
    adjust(type, target, radius) {
      console.log(target);
    },
    getStoreList() {
      getStoreList({}, 1, 100).then(res => {
        let list = res.msg.data;
        list.forEach(a => {
          this.form.divide_config.push({
            starting_amount: 0,
            distribution_fee: 0,
            radius: 2000,
            is_distribution: 0,
            commodity: {
              money: 0
            },
            editable: false,
            dot: {
              longitude: a.longitude,
              latitude: a.latitude
            },
            data: []
          });
        });
        this.storelist = list;
      });
    }
  },
  components: {
    AMap
  }
};
</script>

<style lang="scss" scoped>
.el-input {
  width: 400px;
}
.flex_div {
  display: flex;
  height: 500px;
  .flex_left {
    width: 330px;
    overflow-y: scroll;
    height: 500px;
    margin-right: 20px;
    .list{
      .item{
        border: 1px solid #e9edef;
      .item_top{
        background-color: #f8f8f8;
        padding: 0 15px;
        margin-bottom: 15px;
      }
      }
    }
    .el-input {
      width: 200px;
    }
  }
  .map_area {
    flex: 1;
    height: 500px;
  }
}
</style>
